<template>
<div class="wrapper">

    <div class="tip">
        <svg @click="goBack()" t="1743402074255" class="backIcon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="2913" width="20" height="20">
            <path d="M739.555556 198.599111L412.842667 525.312 739.555556 852.024889l-84.821334 84.764444-411.534222-411.477333L654.791111 113.777778z"
                fill="#fff" p-id="2914">
            </path>
        </svg>
        {{ route.query.name }}
    </div>

    <div class="top-bar"></div>

    <NewsList :category-id="safeCategoryId"/>
</div>
</template>

<script lang="ts" setup>
import { ref,onMounted,computed } from 'vue'
import { useRouter,useRoute } from 'vue-router';
import api from '@/api';
import NewsList from '@/components/NewsList.vue';
import { NewsStore } from '@/stores/newsInfoStore';
import { TipStore } from '@/stores/tipStore';

const route = useRoute();
const router = useRouter();
const newsStoreObject = NewsStore();
const TipStoreObject = TipStore();



const goBack = () => {
  router.go(-1)
}




// 定义一个计算属性，确保 category-id 是字符串
const safeCategoryId = computed(() => {
    const categoryId = route.query.categoryId;
    if (Array.isArray(categoryId)) {
        return categoryId[0] || ''; // 如果是数组，取第一个元素；如果为空，返回空字符串
    }
    return categoryId || ''; // 如果不是数组，直接返回；如果为空，返回空字符串
});


onMounted(async() => {

})

</script>

<style lang="scss" scoped>
@mixin CommonStyle-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper{
    position: relative;
    overflow: hidden
}

.tip {
  @include CommonStyle-center;
  top: 0;
  background-color: #409eff;
  color: #fff;
  height: 60px;
  width: 100%;;
  min-height: 60px;
  position: fixed;
}
.backIcon {
  position: absolute;
  left: 10px;
}

.top-bar {
    height: 76px;
}

</style>
